<template>
  <div class="position">
    <span class="iconfont position__icon">&#xe7af;</span>
    北京大学国防科技园2号楼10层北京大学北京大学北京大学北京大学北京大学北京大学北京大学北京大学
    <span class="iconfont position__notice">&#xe7c4;</span>
  </div>
  <div class="search">
    <span class="iconfont">&#xea70;</span>
    <span class="search__text">会员商店优惠商品</span>
  </div>
  <div class="banner">
    <img class="banner__image" src="http://www.dell-lee.com/imgs/vue3/banner.jpg"/>
  </div>
  <div class="icons">
    <div class="icons__item" v-for="(item,index) in iconsList" :key="item.desc">
      <img class="icons__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`">
      <p class="icons__item__desc">{{item.desc}}</p>
    </div>
  </div>
  <div class="gap"></div>
</template>


<style lang="scss">
@use "@/style/viriables" as *;
@use "@/style/mixins" as *;
.position {
  position: relative;
  padding: .16rem .24rem .16rem 0;
  //margin-right: .24rem;
  line-height: .22rem;
  font-size: .16rem;
  @include ellipsis;

  .position__icon {
    position: relative;
    top: .01rem;
    //margin-right: .08rem;
    font-size: .2rem;
    color: $content-fontcolor;
  }

  .position__notice {
    position: absolute;
    right: 0;
    top: .18rem;
    font-size: .24rem;
  }
}
.search {
  margin-bottom: .12rem;
  line-height: .32rem;
  background: $search-bgColor;
  color: $search-fontColor;
  border-radius: .16rem;

  .iconfont {
    position: relative;
    top: .02rem;
    display: inline-block;
    padding: 0 .12rem 0 .16rem;
    font-size: .2rem;
  }

  &__text {
    display: inline-block;
    font-size: .14rem;
  }
}

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25%;

  &__image {
    width: 100%;
  }
}

.icons {
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;

  &__item {
    width: 20%;

    &__img {
      display: block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }

    &__desc {
      text-align: center;
      margin: .06rem 0 .16rem 0;
      color: $content-fontcolor;;
    }
  }
}
.gap {
  margin: 0 -.18rem;
  height: .1rem;
  background: $content-bgcolor;
}
</style>

<script>
export default{
  name:"StaticPart",
  setup(){
    const iconsList = [
      {imgName:"超市",desc:"超市便利"},
      {imgName:"菜市场",desc:"菜市场"},
      {imgName:"水果店",desc:"水果店"},
      {imgName:"鲜花",desc:"鲜花"},
      {imgName:"医药健康",desc:"医药健康"},
      {imgName:"家居",desc:"家居时尚"},
      {imgName:"蛋糕",desc:"烘焙蛋糕"},
      {imgName:"签到",desc:"签到"},
      {imgName:"红包",desc:"红包"},
      {imgName:"红包",desc:"红包套餐"},
    ];
    return {iconsList};
  }
}
</script>